<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';

        // --- Helper function to draw arrowheads ---
        function drawArrowhead(ctx, x, y, angle, size) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2.5);
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, size / 2.5);
            ctx.stroke();
            ctx.restore();
        }

        // --- Diagram Parameters ---
        const cx = 150;
        const cy = 150;
        const radius = 60;

        // --- Draw the Cylinder (Circle) ---
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Draw the Floor ---
        const floorY = cy + radius;
        // Solid part
        ctx.beginPath();
        ctx.moveTo(cx - 1.5 * radius, floorY);
        ctx.lineTo(cx + 0.5 * radius, floorY);
        ctx.stroke();
        
        // Dashed part
        ctx.beginPath();
        ctx.setLineDash([8, 8]);
        ctx.moveTo(cx + 0.5 * radius, floorY);
        ctx.lineTo(cx + 4 * radius, floorY);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // --- Draw the Translational Velocity (v0) ---
        const v_arrow_len = 150;
        const v_arrow_endX = cx + v_arrow_len;
        
        // Arrow line
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(v_arrow_endX, cy);
        ctx.stroke();
        
        // Arrowhead
        drawArrowhead(ctx, v_arrow_endX, cy, 0, 12);

        // Label v0
        ctx.font = 'italic bold 22px Times New Roman';
        ctx.fillText('v', v_arrow_endX + 10, cy + 8);
        ctx.font = 'bold 16px Times New Roman';
        ctx.fillText('0', v_arrow_endX + 24, cy + 14);


        // --- Draw the Angular Velocity (ω0) ---
        const omega_arc_r = radius + 20;
        const omega_start_angle = 0.8 * Math.PI; // Top-left
        const omega_end_angle = 1.3 * Math.PI;   // Bottom-left

        // Arc
        ctx.beginPath();
        ctx.arc(cx, cy, omega_arc_r, omega_start_angle, omega_end_angle, false); // Draw clockwise
        ctx.stroke();

        // Arrowhead for counter-clockwise rotation
        const arrowhead_angle = omega_end_angle;
        const arrowhead_tipX = cx + omega_arc_r * Math.cos(arrowhead_angle);
        const arrowhead_tipY = cy + omega_arc_r * Math.sin(arrowhead_angle);
        const tangent_angle = arrowhead_angle - Math.PI / 2; // Tangent for CCW motion
        drawArrowhead(ctx, arrowhead_tipX, arrowhead_tipY, tangent_angle, 12);
        
        // Label ω0
        ctx.font = 'italic bold 22px Times New Roman';
        ctx.fillText('\u03C9', cx - omega_arc_r - 20, cy - 20);
        ctx.font = 'bold 16px Times New Roman';
        ctx.fillText('0', cx - omega_arc_r, cy - 14);

        // --- Draw the Figure Label ---
        ctx.font = 'bold 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.151.', canvas.width / 2, floorY + 60);

    </script>
</body>
</html>